<template>
  <div class="home">
    <router-link to="/">返回首页1</router-link>

    <div>
      <h3>{{answers.title}}</h3>
      <ul>
        <li v-for="(todo, index) in answers.choseList" v-on:click="next(index,todo.isCorrectChose)">
          <p>{{abcd[index]}}、 {{todo.answer}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  mounted () {
    this.id = this.$route.params.id
    this.loadData()
    this.count = this.answersList.length
  },
  methods: {
    loadData () {
      console.log(this.id)
      if (this.answersList[this.id] === undefined) {
        this.id = parseInt(this.id) - 1
        return
      }
      this.answers = this.answersList[this.id]
    },
    next (i, s) {
      console.log(i, s, 'sd')

      this.$router.push({ params: {id: this.id }})
      if (s === true) {
        this.result = this.result + 1
      }

      if (parseInt(this.id) === this.count - 1) {
        console.log('已经是最后一题')
        this.$router.push({ path: '/result/' + this.result })
      }
      this.id = parseInt(this.id) + 1
      this.loadData()
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      answers: {},
      id: 0,
      count: 0,
      result: 994,
      abcd: ['A', 'B', 'C', 'D'],
      answersList: [
        {
          'choseList': [
            {
              'answer': '虾壳属于湿垃圾外卖盒属于干垃圾',
              'choseItem': '1'
            },
            {
              'answer': '虾壳会千属于干垃圾外卖盒属于可回收垃圾',
              'isCorrectChose': true,
              'choseItem': '2'
            },
            {
              'answer': '虾壳属于湿垃圾外卖盒属于可回收垃圾',
              'choseItem': '3'
            },
            {
              'answer': '虾壳属于湿垃圾外卖盒被污染属于有害垃圾',
              'choseItem': '4'
            }
          ],
          'title': '点了一份美味小龙虾，吃完的虾壳和外卖盒属于什么垃圾呢?'
        },
        {
          'choseList': [
            {
              'answer': '干垃圾属于其他生活废物'
            },
            {
              'answer': '湿垃圾因为它们都是湿湿的',
              'isCorrectChose': true
            },
            {
              'answer': '可回收垃圾因为它们都是纸做的当然可以回收',
              'choseItem': '3'
            },
            {
              'answer': '有害垃圾上面含 有化学物质'
            }
          ],
          'title': '摘下面膜后，你用湿纸巾擦干净，请问面膜和湿纸巾属于哪类垃圾?'
        },
        {
          'choseList': [
            {
              'answer': '干垃圾 因为纸杯表面含有一层聚乙烯涂层'
            },
            {
              'answer': '湿垃圾 纸杯喝过后含有水分',
              'isCorrectChose': true
            },
            {
              'answer': '可回收垃圾 纸做的当然是回收垃圾',
              'choseItem': '3'
            },
            {
              'answer': '有害垃圾 上面含有化学物质'
            }
          ],
          'title': '炎热的夏季，来一杯快乐水是最爽快不过了，那么喝过的纸杯属于什么垃圾呢？'
        },
        {
          'choseList': [
            {
              'answer': 'A榴莲是水果 属于湿垃圾'
            },
            {
              'answer': 'B榴莲肉易腐烂 属于湿垃圾榴莲皮难分解 属于干垃圾',
              'isCorrectChose': true
            },
            {
              'answer': '榴莲味道较重 属于有害垃圾'
            },
            {
              'answer': '榴莲可以风干 属于干垃圾'
            }
          ],
          'title': '又到了“水果之王”成熟的季节，冰冻过的榴莲，口感似冰淇淋一样可口，那么未吃完的榴莲又属于什么垃圾呢?'
        },
        {
          'choseList': [
            {
              'answer': '属于厨余 丢进湿垃圾'
            },
            {
              'answer': '把珍珠和奶茶全部吸光 杯子丢进干垃圾',
              'isCorrectChose': true
            },
            {
              'answer': '把珍珠和奶茶丢进湿垃圾 杯子洗净后丢进干垃圾',
              'choseItem': '3'
            },
            {
              'answer': '杯子用过后无法回收 丢进干垃圾'
            }
          ],
          'title': '每天的正能量——奶茶，喝过后应该怎么处理呢？'
        }
      ]
    }
  }

}
</script>
